Testiranje zmogljivosti uporabniških vmesnikov: Integracija Lighthouse CI za nenehno izboljševanje

V današnjem digitalnem svetu je zmogljivost spletnih strani ključnega pomena. Počasno nalaganje, težave z dostopnostjo in slab SEO lahko bistveno vplivajo na uporabniško izkušnjo in posledično na poslovne rezultate. Testiranje zmogljivosti uporabniških vmesnikov je postalo bistven del sodobnega življenjskega cikla razvoja programske opreme, ki zagotavlja, da so spletne strani in aplikacije hitre, zanesljive in prijazne do uporabnikov po vsem svetu. Ta članek se poglablja v integracijo Lighthouse CI, močnega odprtokodnega orodja, v vaš sistem za neprekinjeno integracijo (CI) za avtomatizacijo testiranja zmogljivosti uporabniških vmesnikov in spodbujanje nenehnih izboljšav.

Zakaj je testiranje zmogljivosti uporabniških vmesnikov pomembno?

Preden se poglobimo v Lighthouse CI, poglejmo, zakaj je testiranje zmogljivosti uporabniških vmesnikov ključnega pomena:

• Uporabniška izkušnja: Hitra in odzivna spletna stran zagotavlja boljšo uporabniško izkušnjo, kar vodi do večjega angažiranja in nižje stopnje obiskov z zapustitvijo. Predstavljajte si potencialnega kupca v Tokiu na Japonskem, ki poskuša kupiti izdelek na počasi nalagajoči se spletni trgovini. Verjetno bo stran zapustil in poiskal alternative.
• Uvrstitev v iskalnikih (SEO): Iskalniki, kot je Google, upoštevajo hitrost in zmogljivost spletnih strani kot dejavnika za uvrstitev. Hitrejše spletne strani se običajno uvrščajo višje v rezultatih iskanja, kar prinaša več organskega prometa. Googlova iniciativa Core Web Vitals poudarja pomembnost dejavnikov, kot so Largest Contentful Paint (LCP), First Input Delay (FID) in Cumulative Layout Shift (CLS) za SEO.
• Dostopnost: Izboljšave zmogljivosti pogosto vodijo do boljše dostopnosti za uporabnike z oviranostmi. Optimizirana koda in slike lahko izboljšajo izkušnjo za uporabnike, ki se zanašajo na bralnike zaslona, ali tiste z omejeno pasovno širino.
• Stopnje konverzije: Hitrejša spletna stran lahko neposredno vpliva na stopnje konverzije. Študije so pokazale, da lahko že enosekundna zamuda pri nalaganju strani povzroči znatno zmanjšanje konverzij. Pomislite na uporabnika v Mumbaju v Indiji, ki poskuša rezervirati let. Počasen postopek rezervacije bi ga lahko pripeljal do tega, da opusti nakup in izbere konkurenco.
• Optimizacija virov: Testiranje zmogljivosti pomaga prepoznati področja, kjer je mogoče optimizirati vire, kar vodi do prihrankov pri stroških strežniške infrastrukture in porabe pasovne širine.

Predstavitev Lighthouse CI

Lighthouse CI je odprtokodno, avtomatizirano orodje, zasnovano za brezhibno integracijo z vašim sistemom CI/CD. Zaganja Lighthouse, priljubljeno orodje za revizijo, ki ga je razvil Google, in ponuja vpogled v zmogljivost, dostopnost, SEO, najboljše prakse in skladnost s progresivnimi spletnimi aplikacijami (PWA) vaše spletne strani. Lighthouse CI vam pomaga:

• Avtomatizirati revizije zmogljivosti: Samodejno zagnati revizije Lighthouse z vsako potrditvijo kode (commit) ali zahtevkom za združitev (pull request).
• Spremljati zmogljivost skozi čas: Spremljati metrike zmogljivosti skozi čas in zgodaj odkrivati nazadovanja.
• Nastaviti proračune zmogljivosti: Določiti proračune zmogljivosti in prekiniti gradnjo (build), če so ti preseženi.
• Integrirati s sistemi CI/CD: Integrirati s priljubljenimi sistemi CI/CD, kot so GitHub Actions, GitLab CI, CircleCI in Jenkins.
• Sodelovati pri reševanju težav z zmogljivostjo: Deliti poročila Lighthouse in sodelovati s svojo ekipo pri reševanju težav z zmogljivostjo.

Nastavitev Lighthouse CI

Tukaj je vodnik po korakih za nastavitev Lighthouse CI v vašem projektu:

1. Namestitev Lighthouse CI

Namestite Lighthouse CI CLI globalno z uporabo npm ali yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Konfiguracija Lighthouse CI

Ustvarite datoteko lighthouserc.js v korenski mapi vašega projekta za konfiguracijo Lighthouse CI. Tukaj je primer konfiguracije:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Poglejmo si to konfiguracijo podrobneje:

• collect.url: Seznam URL-jev za revizijo. Ta primer preverja domačo stran in stran "O nas". Vključiti bi morali vse ključne strani vaše spletne strani, upoštevajoč različne primere uporabe. Na primer, spletna trgovina bi lahko vključevala domačo stran, strani s seznamom izdelkov, strani s podrobnostmi o izdelkih in postopek nakupa.
• collect.startServerCommand: Ukaz za zagon vašega razvojnega strežnika. To je potrebno, če mora Lighthouse CI delovati v lokalnem razvojnem okolju.
• collect.numberOfRuns: Število zagonov revizij Lighthouse za vsak URL. Večkratni zagon pomaga zmanjšati vpliv nihanj v omrežnih pogojih in drugih dejavnikov.
• assert.assertions: Nabor trditev za preverjanje rezultatov revizije Lighthouse. Vsaka trditev določa metriko ali kategorijo in prag. Če prag ni dosežen, bo gradnja neuspešna. Ta primer postavlja pragove za kategorije zmogljivosti, dostopnosti, najboljših praks in SEO. Prav tako postavlja pragove za specifične metrike, kot so First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) in Cumulative Layout Shift (CLS).
• upload.target: Določa, kam naj se naložijo poročila Lighthouse. temporary-redirect naloži poročila na začasno lokacijo za shranjevanje in zagotovi URL za dostop do njih. Druge možnosti vključujejo uporabo strežnika Lighthouse CI ali rešitev za shranjevanje v oblaku, kot sta Google Cloud Storage ali Amazon S3.

3. Integracija z vašim sistemom CI/CD

Naslednji korak je integracija Lighthouse CI v vaš sistem CI/CD. Tukaj je primer, kako ga integrirati z GitHub Actions:

Ustvarite datoteko .github/workflows/lighthouse.yml v vašem repozitoriju:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Ta potek dela izvaja naslednje korake:

• Prevzame kodo.
• Nastavi Node.js.
• Namesti odvisnosti.
• Zažene Lighthouse CI. Ta korak najprej zgradi aplikacijo (npm run build), nato pa zažene lhci autorun, ki izvede revizije Lighthouse in preveri rezultate glede na nastavljene pragove.

Prilagodite ta potek dela svojemu specifičnemu sistemu CI/CD in zahtevam projekta. Na primer, če uporabljate GitLab CI, bi konfigurirali datoteko .gitlab-ci.yml s podobnimi koraki.

4. Zagon Lighthouse CI

Potrdite svoje spremembe in jih potisnite v svoj repozitorij. Sistem CI/CD bo samodejno zagnal Lighthouse CI. Če katera od trditev ne uspe, bo gradnja neuspešna, kar razvijalcem zagotovi dragocene povratne informacije. Poročila Lighthouse CI bodo na voljo na URL-ju, ki ga zagotovi sistem CI/CD.

Napredna konfiguracija in prilagajanje

Lighthouse CI ponuja široko paleto možnosti konfiguracije in prilagajanja. Tukaj je nekaj naprednih funkcij:

1. Uporaba strežnika Lighthouse CI

Strežnik Lighthouse CI zagotavlja centralizirano nadzorno ploščo za spremljanje metrik zmogljivosti skozi čas, upravljanje projektov in sodelovanje pri reševanju težav z zmogljivostjo. Za uporabo strežnika Lighthouse CI morate nastaviti primerek in konfigurirati svojo datoteko lighthouserc.js za nalaganje poročil na strežnik.

Najprej namestite strežnik. Na voljo so različne možnosti namestitve, vključno z Docker, Heroku in ponudniki oblakov, kot sta AWS in Google Cloud. Za podrobna navodila o namestitvi strežnika si oglejte dokumentacijo Lighthouse CI.

Ko strežnik deluje, posodobite svojo datoteko lighthouserc.js, da bo kazala na strežnik:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Zamenjajte YOUR_LHCI_SERVER_URL z URL-jem vašega strežnika Lighthouse CI in YOUR_LHCI_SERVER_TOKEN z žetonom, ki ga ustvari strežnik. Žeton avtenticira vaš sistem CI s strežnikom.

2. Nastavitev proračunov zmogljivosti

Proračuni zmogljivosti določajo sprejemljive pragove za specifične metrike. Lighthouse CI vam omogoča nastavitev proračunov zmogljivosti in prekinitev gradnje, če so ti proračuni preseženi. To pomaga preprečevati nazadovanja v zmogljivosti in zagotavlja, da vaša spletna stran ostaja znotraj sprejemljivih meja zmogljivosti.

Proračune zmogljivosti lahko določite v svoji datoteki lighthouserc.js z uporabo lastnosti assert.assertions. Na primer, za nastavitev proračuna zmogljivosti za First Contentful Paint (FCP) lahko dodate naslednjo trditev:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Ta trditev bo prekinila gradnjo, če je FCP večji od 2500 milisekund.

3. Prilagajanje konfiguracije Lighthouse

Lighthouse CI vam omogoča prilagajanje konfiguracije Lighthouse, da ustreza vašim specifičnim potrebam. Konfigurirate lahko različne nastavitve Lighthouse, kot so:

• onlyAudits: Določite seznam revizij, ki jih želite zagnati.
• skipAudits: Določite seznam revizij, ki jih želite preskočiti.
• throttling: Konfigurirajte nastavitve omejevanja omrežja za simulacijo različnih omrežnih pogojev.
• formFactor: Določite obliko (namizni ali mobilni) za emulacijo.
• screenEmulation: Konfigurirajte nastavitve emulacije zaslona.

Za prilagoditev konfiguracije Lighthouse lahko ukazu lhci autorun posredujete zastavico --config-path, ki kaže na prilagojeno konfiguracijsko datoteko Lighthouse. Za celoten seznam možnosti konfiguracije si oglejte dokumentacijo Lighthouse.

4. Revizija strani, ki zahtevajo prijavo

Revizija strani, ki zahtevajo prijavo, zahteva nekoliko drugačen pristop. Lighthouse CI morate zagotoviti način za avtentikacijo pred zagonom revizij. To je mogoče doseči z uporabo piškotkov ali s skriptiranjem postopka prijave.

Eden od pogostih pristopov je uporaba zastavice --extra-headers za posredovanje avtentikacijskih piškotkov Lighthouse CI. Piškotke lahko pridobite iz razvijalskih orodij vašega brskalnika po prijavi na spletno stran.

Alternativno lahko uporabite skript Puppeteer za avtomatizacijo postopka prijave in nato zaženete revizije Lighthouse na prijavljenih straneh. Ta pristop zagotavlja večjo prilagodljivost in vam omogoča obravnavo kompleksnih scenarijev avtentikacije.

Najboljše prakse za testiranje zmogljivosti uporabniških vmesnikov z Lighthouse CI

Za čim večji izkoristek Lighthouse CI upoštevajte naslednje najboljše prakse:

• Redno zaganjajte Lighthouse CI: Integrirajte Lighthouse CI v svoj sistem CI/CD, da boste revizije samodejno zagnali z vsako potrditvijo kode ali zahtevkom za združitev. To zagotavlja, da so nazadovanja v zmogljivosti odkrita zgodaj in takoj obravnavana.
• Postavite realistične proračune zmogljivosti: Določite proračune zmogljivosti, ki so zahtevni, a dosegljivi. Začnite s konzervativnimi proračuni in jih postopoma zaostrujte, ko se zmogljivost vaše spletne strani izboljšuje. Razmislite o postavitvi različnih proračunov za različne vrste strani, odvisno od njihove kompleksnosti in pomembnosti.
• Osredotočite se na ključne metrike: Dajte prednost ključnim metrikam zmogljivosti, ki imajo največji vpliv na uporabniško izkušnjo in poslovne rezultate. Googlovi Core Web Vitals (LCP, FID in CLS) so dobro izhodišče.
• Raziščite in odpravite težave z zmogljivostjo: Ko Lighthouse CI odkrije težave z zmogljivostjo, jih temeljito raziščite in implementirajte ustrezne rešitve. Uporabite poročila Lighthouse za identifikacijo temeljnih vzrokov težav in določitev prioritet najvplivnejših popravkov.
• Spremljajte zmogljivost skozi čas: Spremljajte metrike zmogljivosti skozi čas, da prepoznate trende in vzorce. Uporabite strežnik Lighthouse CI ali druga orodja za spremljanje za vizualizacijo podatkov o zmogljivosti in prepoznavanje področij za izboljšave.
• Izobražujte svojo ekipo: Zagotovite, da vaša ekipa razume pomen zmogljivosti uporabniških vmesnikov in kako učinkovito uporabljati Lighthouse CI. Zagotovite usposabljanja in vire, da jim pomagate izboljšati svoje spretnosti in znanje.
• Upoštevajte globalne omrežne pogoje: Pri postavljanju proračunov zmogljivosti upoštevajte omrežne pogoje v različnih delih sveta. Uporabniki na območjih s počasnejšo internetno povezavo imajo lahko drugačno izkušnjo kot uporabniki na območjih s hitrejšimi povezavami. Med testiranjem uporabite orodja za simulacijo različnih omrežnih pogojev.
• Optimizirajte slike: Optimizacija slik je ključni vidik zmogljivosti uporabniških vmesnikov. Uporabite orodja, kot so ImageOptim, TinyPNG ali spletni pretvorniki, za stiskanje in optimizacijo slik brez izgube kakovosti. Uporabljajte sodobne formate slik, kot je WebP, ki ponujajo boljše stiskanje in kakovost kot tradicionalni formati, kot sta JPEG in PNG. Implementirajte "lazy loading" (leno nalaganje) za slike, ki niso takoj vidne v vidnem polju.
• Minificirajte in stisnite kodo: Minificirajte svojo HTML, CSS in JavaScript kodo, da zmanjšate velikost datotek. Uporabite orodja, kot so UglifyJS, Terser ali spletni minifikatorji. Na strežniku omogočite stiskanje Gzip ali Brotli, da še dodatno zmanjšate velikost prenesenih datotek.
• Izkoristite predpomnjenje brskalnika: Konfigurirajte svoj strežnik, da nastavi ustrezne glave za predpomnjenje (cache headers) za statična sredstva, kot so slike, CSS in JavaScript datoteke. To brskalnikom omogoča, da ta sredstva shranijo v predpomnilnik in se izognejo ponovnemu prenašanju.

Zaključek

Integracija Lighthouse CI v vaš razvojni proces je ključen korak k izgradnji visoko zmogljivih, dostopnih in SEO prijaznih spletnih strani. Z avtomatizacijo testiranja zmogljivosti uporabniških vmesnikov in spremljanjem zmogljivosti skozi čas lahko zgodaj odkrijete in odpravite težave z zmogljivostjo, izboljšate uporabniško izkušnjo in povečate poslovne rezultate. Sprejmite Lighthouse CI in naredite nenehno izboljševanje zmogljivosti za osrednjo vrednoto v vašem razvojnem procesu. Ne pozabite, da zmogljivost spletne strani ni enkraten napor, ampak stalen proces, ki zahteva nenehno pozornost in optimizacijo. Upoštevajte kulturne in regionalne dejavnike, da zagotovite brezhibno izkušnjo za vse svoje uporabnike, ne glede na njihovo lokacijo ali napravo. Z upoštevanjem najboljših praks, opisanih v tem članku, lahko zagotovite, da vaša spletna stran uporabnikom po vsem svetu zagotavlja hitro, zanesljivo in prijetno izkušnjo.